<template>
    <!-- 二维码登入 -->
     <div class="qrCode erweima">
               <!-- <h1 class="title" >微信扫码登录</h1> -->
                <div class="img" v-loading="loading" >
                      <img :src="qrImg" width="200px" alt="">
                      <i class="mask" v-if="showQrMask" :style="maskBg" @click="updateQr"></i>
                </div>
                <p>
                    <svg class="icon-wx" aria-hidden="true">
                        <use xlink:href="#icon-weixin"></use>
                    </svg>
                    <b>请使用手机微信扫码登入</b>
                </p>
    </div>
</template>

<script >
    //引入socket.io
    import socketIo from "socket.io-client"
    //引入qrcode
    import qrcode from "qrcode"
    //引入api
    import * as api from "@/api/users.js"
    //引入成功和失败扫码遮罩图片
    import invalidImg from "@/assets/img/invalidQr.png"
    import scanSuccessImg from "@/assets/img/scancode.png"
// import url from 'socket.io-client/lib/url'
    import storage from "@/utils/storage.js"
    export default{
        props:{
            storageUserInfo:{
                required:true,//
            }
        },
        data () {
            return {
                //二维码图片
                qrImg:"",
                //是否显示遮罩
                showQrMask: false,    
                //遮罩背景样式
                maskBg:{ backgroundImage:`url(${scanSuccessImg})`},//扫码成功
                // maskBgInvalid:{background:url(invalidImg)},//二维码失效
                loading:true ,
            }
        },
        created(){
            // console.log(this.storageUserInfo);
            //建立socket连接
            let io = socketIo('wss://chst.vip')
            //监听连接的事件
            io.on('connectSuccess',async ({sid})=>{
               //将sid存到本地
               storage.set('qf-sid',sid)
                this.getQrUrl(sid)
            })
  
            //无效二维码
            io.on("invalidCode", data => {
                console.log(data);
                //展示遮罩
                this.showQrMask = true
                //显示无效的二维码遮罩样式
                this.maskBg.backgroundImage = `url(${invalidImg})`
            })
            
            //扫码成功
            io.on('scancodeSuccess', async ({state,wechatCode,msg}) => {
                //扫码成功显示遮罩
                this.showQrMask = true
                this.maskBg.backgroundImage = `url(${scanSuccessImg})`
                if (state) {
                    //调用微信登入的接口
                   let res =  await api.wechatLoginApi(wechatCode)
                        //console.log(res);
                   //将内容存到本地
                   this.storageUserInfo(res.data)
                   //跳转页面
                   this.$router.push("/")
                }else{
                    console.error(msg)
                }
            })
        },
        methods:{
            async getQrUrl(sid){
                //打开加载动画
                this.loading = true
                 //请求获取二维码地址
               let res = await api.getQrCodeApi(sid)
               //console.log(res);
                let {scanCodeUrl:qrcodeUrl} = res.data

                //通过qrcode插件，生产二维码
                qrcode.toDataURL(qrcodeUrl,(err,img)=>{
                    if (err) {
                        throw err
                    }
                    // console.log(img);
                    this.qrImg = img

                    //关掉遮罩
                    this.showQrMask = false
                    //关掉loading动画
                    this.loading=false
                })

            },

            //更新二维码地址
            updateQr(){
                //获取本地存储的sid
                let sid = storage.get('qf-sid')
                console.log(sid);
                this.getQrUrl(sid)
            }
        }
    }

</script>

<style lang="less" scoped>
.qrCode{
    width: 400px;
}

.icon-wx {
    width: 25px !important;
    height: 25px !important;
    vertical-align: -7px;
    margin-right: 3px;
}

//二维码样式
.erweima .img{
    display: inline-block;
    position: relative;
    width: 200px;
    height: 200px;

    img{
        position: absolute;
        left: 0;
    }

     .mask {
            width: 100%;
            height: 100%;
            opacity: 0.8;
            background-color: #fff;
            position: absolute;
            left: 0;
            // background-image: url("../../assets/img/scancode.png");
            background-size: 50%;
            background-repeat: no-repeat;
            background-position: center;
            cursor: pointer;
        }
}


</style>